import { LoginParams } from '@/services/login';
import { history, useModel } from '@umijs/max';
import { Button, Form, Input } from 'antd';
import styles from './index.less'

const Login = () => {
  const [form] = Form.useForm();
  const { toLogin, loading } = useModel('Login.userModel');
  const { initialState, setInitialState } = useModel('@@initialState');
  // const [codeKey, setCodeKey] = useState(Date.now());

  // const changeImageCode = () => {
  //   setCodeKey(Date.now());
  // };

  const onFinish = async (value: Omit<LoginParams, 'codeKey'>) => {
    console.log();

    toLogin({ ...value, clientFrom: 'pc_web', loginMethod: 'password' }).then(
      () => {
        initialState?.fetchUserInfo?.().then((userInfo) => {
          console.log('userInfo', userInfo);
          setInitialState((state) => ({ ...state, currentUser: userInfo }));
          const urlParams = new URL(window.location.href).searchParams;
          /** 此方法会跳转到 redirect 参数所在的位置 */
          const redirect = urlParams.get('redirect');
          history.push(redirect || '/');
        });
      },
    );
  };

  return (
    <div className={`${styles.bgCont} bg-[#409eff] w-full h-full`}>
      <div className="flex h-full items-center justify-center gap-7">
        <div className="w-[300px] text-[38px] text-white">
          <div>欢迎登录</div>
          <div>渠道管理系统</div>
        </div>
        <div className="bg-white w-[490px] rounded-3xl  px-12 pb-10">
          <div className="text-[38px] font-bold text-[#333] text-center mt-[40px] mb-[70px]">
            渠道管理系统
          </div>
          <Form form={form} onFinish={onFinish}>
            <Form.Item
              name="mobile"
              rules={[{ required: true, message: '渠道号不能为空' }]}
            >
              <Input
                className="h-[56px] rounded-xl"
                placeholder="请输入渠道号"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input.Password
                className="h-[56px] rounded-xl"
                placeholder="请输入密码"
              />
            </Form.Item>
            {/* <Form.Item>
              <Row justify={'space-between'}>
                <Col span={16}>
                  <Form.Item
                    name="imageCode"
                    rules={[{ required: true, message: '请输入验证码' }]}
                  >
                    <Input
                      className="h-[56px]  rounded-xl"
                      placeholder="请输入验证码"
                    />
                  </Form.Item>
                </Col>
                <Col span={8} className="text-end">
                  <div
                    className="cursor-pointer inline-block w-[100px] h-[56px] rounded-xl overflow-hidden"
                    onClick={changeImageCode}
                  >
                    <img
                      src={`${BASE_URL}/anno/image-code/get-code?codeKey=${codeKey}`}
                    />
                  </div>
                </Col>
              </Row>
            </Form.Item> */}

            <Form.Item>
              <Button
                loading={loading}
                htmlType="submit"
                type="primary"
                className="w-full h-[56px]"
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default Login;
